<script>
import { getShowNginxPicUrl } from "@/utils/settings"
import scanQrcodePopup from "./scanQrcodePopup.vue"
import { handleUrlParams } from "@/utils"

export default {
  name: "hasReceive",
  methods: {
    getShowNginxPicUrl,
    btnClick(item) {
      // 打开客服二维码弹窗
      if (item.event === "scanQrCode") {
        this.$refs.scanQrcodePopup.open(item.qrCode)
        // 跳转站内页面
      } else if (item.event === "jumpPage") {
        uni.navigateTo({
          url: item.url,
        })
        // 跳h5界面
      } else if (item.event === "jumpH5") {
        uni.navigateTo({
          url: handleUrlParams("/pages/web-view/web-view", {
            path: encodeURIComponent(item.url),
          }),
        })
        // 跳小程序
      } else if (item.event === "jumpMiniProgram") {
        uni.navigateToMiniProgram({
          appId: item.appId,
          path: item.path,
        })
      }
    },
  },
  components: { scanQrcodePopup },
  props: {
    config: Object,
    getResourceTypeConfig: Function,
    hasReceiveResource: Object,
  },
  computed: {
    // 获取已经领取的资料类型配置
    receivedResourceTypeConfig() {
      return this.getResourceTypeConfig(this.hasReceiveResource.type, this.config)
    },
  },
  data() {
    return {}
  },
  emits: ["copyLink"],
}
</script>

<template>
  <view class="page" v-if="receivedResourceTypeConfig">
    <image
      class="poster"
      :src="getShowNginxPicUrl(receivedResourceTypeConfig.headerShortPoster)"
      mode="widthFix"
      :show-menu-by-longpress="true"
    ></image>
    <!--		当前选择的资料详情-->
    <view class="current-select-resource-detail" v-if="hasReceiveResource.link">
      <!--			图标-->
      <image class="icon" :src="getShowNginxPicUrl(receivedResourceTypeConfig.icon)"></image>
      <view class="info">
        <!--				资料名称-->
        <view class="name">{{ hasReceiveResource.name }}</view>
        <!--				资料描述-->
        <view class="desc">{{ hasReceiveResource.desc }}</view>
      </view>
      <!--			复制链接按钮-->
      <view class="copy-link-btn" @click="() => $emit('copyLink', hasReceiveResource.link)">复制链接</view>
    </view>
    <image
      class="poster"
      mode="widthFix"
      :show-menu-by-longpress="true"
      :src="getShowNginxPicUrl(receivedResourceTypeConfig.longPoster)"
    ></image>
    <!--		底部按钮-->
    <view class="footer-btn-list" v-if="receivedResourceTypeConfig.btnList.length > 0">
      <view
        class="btn"
        v-for="(item, index) in receivedResourceTypeConfig.btnList"
        :key="index"
        :class="{
          plain: item.type === 'plain',
          primary: item.type === 'primary',
        }"
        @click="btnClick(item)"
        >{{ item.text }}</view
      >
    </view>

    <scanQrcodePopup ref="scanQrcodePopup"></scanQrcodePopup>
  </view>
</template>

<style scoped lang="scss">
.page {
  padding-bottom: 10rpx;
  display: flex;
  flex-direction: column;
  > .poster {
    width: 100%;
  }
  > .current-select-resource-detail {
    padding: 30rpx;
    display: flex;
    align-items: center;
    border: 4rpx solid var(--text-color);
    > .icon {
      width: 60rpx;
      height: 60rpx;
    }
    > .info {
      margin-left: 20rpx;
      width: 0;
      flex: 1;
      > .name {
        font-size: 30rpx;
        font-weight: bold;
      }
      > .desc {
        font-size: 26rpx;
        color: var(--text-color-light);
      }
    }
    > .copy-link-btn {
      margin-left: 20rpx;
      padding: 10rpx 30rpx;
      background: #f98f03;
      font-size: 30rpx;
      color: white;
      border-radius: 30rpx;
    }
  }
  > .footer-btn-list {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 100vw;
    display: flex;
    box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
    > .btn {
      width: 0;
      flex: 1;
      padding: {
        top: 30rpx;
        bottom: 30rpx;
      }
      text-align: center;
      font-size: 32rpx;
      &.plain {
        background: linear-gradient(90deg, rgba(253, 239, 219, 1) 0%, rgba(255, 255, 255, 1) 100%);
        color: #ff3a33;
      }
      &.primary {
        background: linear-gradient(90deg, rgba(255, 58, 51, 1) 0%, rgba(255, 133, 74, 1) 100%);
        color: white;
      }
    }
  }
}
</style>
